<template>
  <div class="eroll">
    <img src="@/assets/img/world.png" alt="" />
    <h3>{{ $t("language.erolls.name") }}</h3>
    <el-form class="loginfrom" ref="loginform" :label-position="erollinfo.labelPosition" :model="erollinfo.erollform"
      style="width: 90%" :rules="erollrules">
      <el-form-item prop="mobile">
        <div class="phone">
          <el-input  clearable :placeholder="$t('language.erolls.input1')" style="width: 100%; color: #fff"
            v-model="erollinfo.erollform.mobile">
            <template #prepend>
              <img :src="select" alt="" />
              <strong></strong>
              <div class="select">
                <span @click="rotate = !rotate">+{{
      erollinfo.erollform.countryCode
    }}</span>
                <el-icon @click="rotate = !rotate" color="#fff" :class="rotate ? 'rotate' : ''">
                  <arrow-down />
                </el-icon>
                <ul :class="rotate ? 'downlist' : ''">
                  <li v-for="(item, index) in country" @click="countrycode(item)" :key="index">
                    <img :src="item.img" alt="" />
                    <span>{{ item.num }}</span>
                  </li>
                </ul>
              </div>
            </template>
          </el-input>
        </div>
      </el-form-item>
      <el-form-item prop="coinType">
        <div class="phone">
          <el-select v-model="erollinfo.erollform.coinType" placeholder="BRL" popper-class="BRL-select"
            style="width: 100%" :popper-append-to-body="false">
            <el-option label="BRL" class="el-option" value="BRL">
              <img src="@/assets/img/mylrft.png" alt="" />
              <span>BRL</span>
            </el-option>
            <template #prefix>
              <img style="width: 32px;" src="@/assets/img/dolar.png" alt="">
              <!-- <el-icon color="#c0c4cc" size="32">
                <User />
              </el-icon> -->
              <strong></strong>
            </template>
          </el-select>
        </div>
      </el-form-item>
      <el-form-item label="" prop="password">
        <div class="password">
          <el-input  clearable :type="open ? 'word' : 'password'" style="width: 100%" :placeholder="$t('language.erolls.input3')"
            v-model="erollinfo.erollform.password">
            <template #prepend>
              <el-icon color="#c0c4cc" size="32">
                <Lock />
              </el-icon>
              <strong></strong>
            </template>
            <template #append>
              <el-icon v-if="open" @click="open = !open" color="#c0c4cc" size="24">
                <View />
              </el-icon>
              <el-icon v-else color="#c0c4cc" @click="open = !open" size="24">
                <Hide />
              </el-icon>
            </template>
          </el-input>
        </div>
      </el-form-item>
      <el-form-item label="" prop="privacyPolicy">
        <div class="checkbox">
          <el-checkbox text-color="#606266" v-model="erollinfo.erollform.privacyPolicy"></el-checkbox>
          <span>{{ $t("language.erolls.radio1") }} <a href="#" @click.prevent="openprivacsy">{{
      $t("language.erolls.privacsy")
    }}</a> {{
        $t("language.erolls.radio2") }} </span>
        </div>
      </el-form-item>
    </el-form>

    <van-button class="login" :loading="erollinfo.loading" loading-type="spinner" :disabled="erollinfo.loading"
      @click="submitForm">{{ $t("language.erolls.btn") }}</van-button>
    <el-divider> <span class="line">OR</span> </el-divider>
    <p @click="jump">
      {{ $t("language.erolls.jump") }}<el-icon size="18">
        <Right />
      </el-icon>
    </p>
    <privacsy ref="refprivacsy" />
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, defineAsyncComponent, watch, defineEmits } from "vue";
import { encrypt } from "@/utils/code.ts";
import { userequest } from "@/hooks/usehttprequest.ts";
import { useI18n } from "vue-i18n";
import { useRouter } from 'vue-router'
import { useStore } from "vuex";
let privacsy = defineAsyncComponent(() => import("@/components/privacsy.vue"))
const store = useStore();
const { PostHttp } = userequest();
let router = useRouter()
const { t } = useI18n();
const currentRoute: any = router.currentRoute;

//动态获取图片路径
const getImg = (url) => {
  return new URL(`../assets/img/${url}`, import.meta.url).href;
};
let loginform = ref(null);
let rotate = ref(false);
//打开隐私协议
let refprivacsy = ref(null)
let openprivacsy = () => {
  refprivacsy.value.open()
}
//提交信息
let submitForm = async () => {
  console.log(loginform.value);
  loginform.value.validate((valid) => {
    if (valid) {
      erollinfo.loading = true;
      // showLoadingToast({
      //   message: t("language.commontips.loading"),
      //   loadingType: "spinner",
      //   duration: 0,
      //   zIndex: "9999",
      // });
      let form = JSON.parse(JSON.stringify(erollinfo.erollform));
      form.password = encrypt(erollinfo.erollform.password).toString().substring(0, 32);
      PostHttp("/UserCenter/v1.0/Web/Register/Phone", {
        ...form,
      })
        .then((res) => {
          switch (res.data.code) {
            case 5077:
              ElMessage({
                message: t("language.commontips.userexist"),
                type: "error",
                duration: 1000,
              });
              break;
            case 0:
              ElMessage({
                message: t("language.commontips.erollsuccess"),
                type: "success",
                duration: 1000,
                onClose: () => {
                  localStorage.setItem("token", res.data.data.jwtToken);
                  localStorage.setItem(
                    "info",
                    JSON.stringify(res.data.data.info)
                  );
                  store.commit("SET_TOKEN", res.data.data.jwtToken);
                  store.commit("SET_INFO", res.data.data.info);
                  store.dispatch('GetUserInfo', res.data.data.info).then(({ data }) => {
                    if (data.code == 0) {
                      store.commit('SET_COININFO', data.data.accounts)
                      localStorage.setItem('coinType', 'BRL')
                      store.commit('SET_COINTYPE', "BRL")
                      localStorage.setItem('coininfo', JSON.stringify(data.data.accounts))
                      store.commit("SET_LOGIN", false);
                    }
                  })
                },
              });
              break;
          }

          // showToast({
          //   message: t("language.commontips.erollsuccess"),
          //   duration: 1500,
          //   zIndex: "9999",
          //   onClose: () => {
          //     localStorage.setItem("token", res.data.jwtToken);
          //     store.commit("SET_TOKEN", res.data.jwtToken);
          //     store.commit("SET_INFO", res.data.info);
          //     router.push("/home");
          //     store.commit("SET_LOGIN", false);
          //   },
          // });
        })
        .finally(() => {
          erollinfo.loading = false;
          // closeToast();
        });
    } else {
      // console.log(54545);
      return false;
    }
  });
};
//选择国家code
let select = ref(getImg("guoqi_03.png"));
let country = reactive([
  {
    num: "55",
    img: getImg("guoqi_03.png"),
  },
  {
    num: "63",
    img: getImg("country1.png"),
  },
  {
    num: "1",
    img: getImg("guoqi_01.png"),
  },
  {
    num: "62",
    img: getImg("country2.png"),
  },
  {
    num: "52",
    img: getImg("country3.png"),
  },
  {
    num: "91",
    img: getImg("country4.jpg"),
  },
]);
let countrycode = (item) => {
  erollinfo.erollform.countryCode = item.num;
  rotate.value = !rotate.value;
  select.value = item.img;
};

let open = ref(true);
let emit = defineEmits(["openlogin"]);
let jump = () => {
  emit("openlogin", "login");
};
let privacys = (rule, value, callback) => {
  if (value == false) {
    callback(new Error(t("language.loginhome.tipsprivacy")));
  } else {
    callback();
  }
};
const erollinfo = reactive({
  erollform: {
    // mobile: undefined,
    // password: undefined,
    mobile: "",//电话号码
    password: "",//密码
    coinType: undefined,//金币类型
    spreaderGameId: 0,//请求邀请id
    privacyPolicy: false,//隐私政策
    countryCode: "55",//国家编码
  },
  labelPosition: "right",
  loading: false,
});
//监视表单属性
watch([() => erollinfo.erollform.mobile, () => erollinfo.erollform.password], () => {
  erollinfo.erollform.mobile = erollinfo.erollform.mobile.replace(/[^0-9a-zA-Z_\.]*$/g, '')
  erollinfo.erollform.password = erollinfo.erollform.password.replace(/[^0-9a-zA-Z_\.]*$/g, '')
})
const erollrules = reactive({
  mobile: [
    {
      required: true,
      message: t("language.loginhome.tipsphone"),
      trigger: ["blur"],
    },
    {
      min: 6,
      max: 20,
      message: t("language.loginhome.tips2"),
      trigger: "blur",
    },
  ],
  password: [
    {
      required: true,
      message: t("language.loginhome.tipsword"),
      trigger: "blur",
    },
    {
      min: 6,
      max: 20,
      message: t("language.loginhome.tips2"),
      trigger: "blur",
    },
  ],
  privacyPolicy: [
    {
      validator: privacys,
      message: "Por favor, concorde",
      trigger: ["blur", "change"],
    },
  ],
});
</script>

<style lang="scss">
.BRL-select .el-popper__arrow::before {
  background-color: rgb(39, 42, 48) !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

.BRL-select .el-select-dropdown__list {
  background-color: rgb(39, 42, 48) !important;
  width: 100%;
}

.BRL-select .el-scrollbar {
  background-color: rgb(39, 42, 48) !important;
  width: 100%;
}

.el-select-dropdown__item.selected {
  color: #fff !important;
  background-color: rgb(50, 53, 62) !important;
}

.BRL-select .el-select-dropdown__item {
  color: #fff !important;
  font-weight: bold !important;
  display: flex;
  justify-content: flex-start;
  background-color: rgb(39, 42, 48) !important;
  align-items: center;

  .selected {
    background-color: rgb(39, 42, 48) !important;
  }

  img {
    width: 24px;
    height: 24px;

    margin: 0 15px 0px 0;
  }
}

.eroll {
  .el-option {
    height: 100%;
    background-color: #000;

    img {
      width: 20px;
    }
  }

  .el-input__inner {
    color: #fff !important;
  }

  /*.el-select-dropdown__wrap,
  .el-select-dropdown__list,
  .el-scrollbar,
  .el-popper,
  .el-select-dropdown {
    background-color: rgb(39, 42, 48) !important;
  }
*/
  .el-select,
  .el-input {
    border: none !important;
    box-shadow: none !important;
    border-radius: 10px !important;
    border: 1px solid #4a4c53 !important;
  }

  .el-input-group__append {
    background-color: rgb(40, 43, 48);
    box-shadow: none !important;
    border: none !important;
    border-radius: 10px !important;
  }

  .el-input-group__prepend {
    background-color: rgb(40, 43, 48);
    box-shadow: none !important;
    border: none !important;
    padding: 0;
    border-radius: 10px !important;
  }

  .el-select__prefix {
    gap: 0px;
  }

  .el-input-group__append {
    padding: 0 10px;
  }

  width: 100%;

  .el-input__wrapper,
  .el-tooltip__trigger {
    box-shadow: none !important;
    border: none !important;
    padding-left: 0;
    border-radius: 10px !important;
  }

  >img {
    width: 150px;
    margin: 20px auto 0;
  }

  .el-divider__text {
    background-color: rgb(50, 53, 62);
  }

  .el-divider--horizontal {
    border-top: 1px solid #4a4c53;
  }

  .line {
    display: block;
    color: #fff;
    font-size: 12px;
  }

  .user {
    width: 50px;
    height: 59px;
  }

  >p {
    @include flex(row, center, center);
    padding-top: 40px;
    font-size: 18px;
    color: #03b484;

    .el-icon {
      margin: 3px 0 0 10px;
    }
  }

  @include flex(column, flex-start, center);

  >h3 {
    font-size: 24px;
    color: #fff;
    padding: 18px 0;
  }

  .phone {
    width: 100%;
    @include flex(row, flex-start, center);
    border-radius: 10px;

    background-color: rgb(40, 43, 48);

    .el-icon {
      margin: 0 5px;
    }

    img {
      width: 32px;
      margin: 0 5px;
      border-radius: 16pc;
    }

    strong {
      display: block;
      width: 2px;
      height: 28px;
      background-color: #4a4c53;
    }

    .el-select__placeholder {
      color: #fff;
      font-size: 16px;
    }

    .select {
      width: 90px;
      position: relative;
      @include flex(row, center, center);

      span {
        font-size: 16px;
        color: #fff;
      }

      .el-icon {
        transition: all 0.5s;
      }

      .downlist {
        opacity: 1;
        display: block;
      }

      ul {
        opacity: 0;
        padding: 6px 0;
        transition: all 0.3s;
        position: absolute;
        top: 45px;
        z-index: 20;
        width: 88px;
        display: none;
        background-color: rgb(39, 42, 48);
        border-radius: 5px;

        li:nth-child(1) {
          &::after {
            content: "";
            position: absolute;
            top: -7px;
            left: 10px;
            z-index: 21;
            transform: translateY(-50%);
            border-left: 7px solid transparent;
            border-right: 7px solid transparent;
            border-bottom: 7px solid rgb(39, 42, 48);
            border-top: 7px solid transparent;
            /* 三角标颜色 */
          }
        }

        li {
          width: 100%;
          padding: 0 14px;
          height: 34px;

          @include flex(row, space-between, center);

          img {
            width: 22px;
            height: 22px;
            margin: 0;
            border-radius: 11px;
          }

          span {
            font-size: 14px;
            color: #8492a6;
          }
        }
      }

      .rotate {
        transform: rotate(180deg);
      }
    }
  }

  .login {
    width: 90%;
    display: block;
    height: 42px;
    line-height: 42px;
    background-color: #0a906c;
    text-align: center;
    margin: 15px 0 5px;
    font-size: 15px;
    border: none;
    color: #fff;
    border-radius: 10px;
  }

  .password {
    width: 100%;
    @include flex(row, flex-start, center);
    border-radius: 10px;
    background-color: rgb(40, 43, 48);

    strong {
      display: block;
      width: 2px;
      height: 28px;
      background-color: #4a4c53;
      margin-right: 5px;
    }

    .el-icon {
      margin: 0 5px;
    }
  }

  .checkbox {
    width: 90%;
    @include flex(row, space-between, center);
    margin-top: 15px;

    span {
      display: block;
      font-size: 13px;
      line-height: 17px;
      color: rgb(149, 151, 158);

      a {
        color: #03b484
      }
    }

    .el-checkbox {
      --el-checkbox-checked-input-border-color: #0a906c;
      --el-checkbox-checked-bg-color: #0a906c;
      margin-right: 10px;
    }

    .el-checkbox__label {
      color: #606266;
    }

    .el-checkbox__input.is-checked+.el-checkbox__label {
      color: #0a906c !important;
    }
  }

  .el-input__wrapper {
    background-color: rgb(40, 43, 48);
    height: 40px;
    box-shadow: none;
    border-radius: 10px !important;
    color: #fff;
  }

  .el-select__wrapper {
    background-color: rgb(40, 43, 48);
    height: 40px;
    box-shadow: none;
    border-radius: 10px !important;
    color: #fff;
  }
}
</style>
